

<script src="/static/bootstrap3/jquery-1.8.3.min.js"></script>
<script src="static/bootstrap3/js/bootstrap.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<!--<script src="static/bootstrap3/css/bootstrap.min.css"></script>-->
<div class="row">
    <div class="col-lg-6 col-sm-6 col-md-6"   id="main_1" style="height: 800px;"></div>
    <div class="col-lg-6 col-sm-6 col-md-6"  id="main_2" style="height: 800px;" ></div>
</div>

<script type="application/javascript">
    $(function () {
        $("#section").css("backgroundColor", "white");
        const myChart = echarts.init(document.getElementById("main_1"), 'light');
        const myChart1=echarts.init(document.getElementById("main_2"), 'light');
        myChart.showLoading();  // 开启 loading 效果
        // 调用
        chart();

        function chart(){
            myCharts1();
            myCharts2();
};

function myCharts1(){
        $.get('/goods/goods', function (result) {
            var datax = [];
            var datay = [];
            for (const row in result.data) {
                datax.push(result.data[row].productname);
                datay.push(result.data[row].productsellnum);
            }
            console.log(datax);
            console.log(datay);
            var option = {
                title: {
                    text: '商品销售图'

                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['销量']

                },
                xAxis: {
                    data: datax,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: datay,
                    color: ['#e69d87'],

                }
                ]
            };
            myChart.hideLoading();
            myChart.setOption(option);

        });
    }

function  myCharts2() {
    $.get('/goods/goods', function (result) {
        let data=[];

        for (const row in result.data) {
            let data1={};
            data1.value= result.data[row].productsellnum;
            data1.name=result.data[row].productname;
            data.push(data1);
        }
        // console.log(data1);
        console.log(data);
        var option = {
            title: {
                text: '商品销售pie图',
                left: 'center',
                top: 20
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            textStyle: {
                decoration: 'none',
                fontFamily: 'Arial, Verdana, sans-serif',
                fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
                fontSize: 20,
                fontStyle: 'normal',
                fontWeight: 'normal'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:data,
                    roseType: 'angle',
                    itemStyle: {
                        normal: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart1.hideLoading();
        myChart1.setOption(option);
    },'json')

}
    })


</script>
